<template>
  <div class="container-fluid m-0 p-0">
    <el-radio-group v-model="chattype">
      <el-radio-button v-for="(item, index) of chattypes" :key='index' :label='item.value'>{{item.text}}</el-radio-button>
    </el-radio-group>
    <el-input type="textarea" v-model="chattext" placeholder="请输入聊天信息" maxlength="100" show-word-limit></el-input>
    <!-- <p><br></p> -->
    <p></p>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis01">
      <button v-for="(item, index) of emojilist01" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">😀</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis02">
      <button v-for="(item, index) of emojilist02" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">👦</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis03">
      <button v-for="(item, index) of emojilist03" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">💪</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis04">
      <button v-for="(item, index) of emojilist04" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">👘</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis05">
      <button v-for="(item, index) of emojilist05" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">🐶</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis06">
      <button v-for="(item, index) of emojilist06" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">💐</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis07">
      <button v-for="(item, index) of emojilist07" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">🍉</button>
    </el-popover>
    <el-popover placement="right" width="500" trigger="click" v-model="emojivis08">
      <button v-for="(item, index) of emojilist08" :key='index' type="button" class="btn btn-outline-primary" :name=item @click=onemoji($event)>{{item}}</button>
      <button type="button" class="btn btn-success" slot="reference">⚽</button>
    </el-popover>
    <p></p>
    <el-button round type="primary" class="btn-block" v-on:click="onchat">发送聊天</el-button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      vdata: this.gdata.data,
      chattypes: [
        { value: 0, text: '闲聊' },
        { value: 1, text: '谣言' },
        { value: 2, text: '房间' },
        { value: 3, text: '门派' },
        { value: 4, text: '帮会' },
        { value: 5, text: '私聊' }
      ],
      chattype: 0,
      chattext: '',
      chattime: new Date(),
      emojivis01: false,
      emojivis02: false,
      emojivis03: false,
      emojivis04: false,
      emojivis05: false,
      emojivis06: false,
      emojivis07: false,
      emojivis08: false,
      emojilist01: [
        '😀', '😁', '😂', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', '😚', '☺', '😇', '😐', '😑', '😶', '😏', '😣', '😥', '😮', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '😒', '😓', '😔', '😕', '😲', '😷', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😬', '😰', '😱', '😳', '😵', '😡', '😠', '😈', '👿', '👹', '👺', '💀', '☠', '👻', '👽'
      ],
      emojilist02: [
        '👦', '👧', '👨', '👩', '👴', '👵', '👶', '👱', '👮', '👲', '👳', '👷', '👸', '💂', '🎅', '👰', '👼', '💆', '💇', '🙍', '🙎', '🙅', '🙆', '💁', '🙋', '🙇', '🙌', '🙏', '👤', '👥', '🚶', '🏃', '👯', '💃', '👫', '👬', '👭', '💏', '💑', '👪'
      ],
      emojilist03: [
        '💪', '👈', '👉', '☝', '👆', '👇', '✌', '✋', '👌', '👍', '👎', '✊', '👊', '👋', '👏', '👐', '✍'
      ],
      emojilist04: [
        '👣', '👀', '👂', '👃', '👅', '👄', '💋', '👓', '👔', '👕', '👖', '👗', '👘', '👙', '👚', '👛', '👜', '👝', '🎒', '💼', '👞', '👟', '👠', '👡', '👢', '👑', '👒', '🎩', '🎓', '💄', '💅', '💍', '🌂'
      ],
      emojilist05: [
        '🙈', '🙉', '🙊', '🐵', '🐒', '🐶', '🐕', '🐩', '🐺', '🐱', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '🐈', '🐯', '🐅', '🐆', '🐴', '🐎', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🐘', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐻', '🐨', '🐼', '🐾', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🐸', '🐊', '🐢', '🐍', '🐲', '🐉', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🐙', '🐚', '🐌', '🐛', '🐜', '🐝', '🐞', '🦋'
      ],
      emojilist06: [
        '💐', '🌸', '💮', '🌹', '🌺', '🌻', '🌼', '🌷', '🌱', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿', '☘', '🍀', '🍁', '🍂', '🍃'
      ],
      emojilist07: [
        '🍇', '🍈', '🍉', '🍊', '🍋', '🍌', '🍍', '🍎', '🍏', '🍐', '🍑', '🍒', '🍓', '🍅', '🍆', '🌽', '🍄', '🌰', '🍞', '🍖', '🍗', '🍔', '🍟', '🍕', '🍳', '🍲', '🍱', '🍘', '🍙', '🍚', '🍛', '🍜', '🍝', '🍠', '🍢', '🍣', '🍤', '🍥', '🍡', '🍦', '🍧', '🍨', '🍩', '🍪', '🎂', '🍰', '🍫', '🍬', '🍭', '🍮', '🍯', '🍼', '☕', '🍵', '🍶', '🍷', '🍸', '🍹', '🍺', '🍻', '🍴'
      ],
      emojilist08: [
        '🎪', '🎭', '🎨', '🎰', '🚣', '🛀', '🎫', '🏆', '⚽', '⚾', '🏀', '🏈', '🏉', '🎾', '🎱', '🎳', '⛳', '🎣', '🎽', '🎿', '🏂', '🏄', '🏇', '🏊', '🚴', '🚵', '🎯', '🎮', '🎲', '🎷', '🎸', '🎺', '🎻', '🎬', '👾'

      ]
    }
  },
  components: {
    // websocket: websocket
  },
  methods: {
    onemoji: function (event) {
      this.chattext += event.srcElement.name
      this.emojivis01 = false
      this.emojivis02 = false
      this.emojivis03 = false
      this.emojivis04 = false
      this.emojivis05 = false
      this.emojivis06 = false
      this.emojivis07 = false
      this.emojivis08 = false
    },
    onchat: function (event) {
      if (this.chattext === '') {
        this.jxtoast('聊天消息不能为空！')
        return
      }
      var now = new Date()
      let ts = now - this.chattime
      if (ts < 2000) {
        this.jxtoast('聊天发送太频繁！')
        return
      }

      var req = this.wsreq('C2G_CHAT_SEND')
      req.ChatType = this.chattype
      req.Text = this.chattext
      this.wssend(req)

      this.chattime = new Date()

      this.chattext = ''
      this.$parent.vclose()
    },
    onkeyevent: function (key) {
      // 回车
      if (key === 13) {
        this.onchat()
      }
    }
  },
  computed: {
  }
}
</script>

<style scoped>
</style>
